<template>
    <div class="tags">
        <AppInputTags v-model="tags" />
    </div>
</template>

<script setup lang="ts">
import { track } from '@/services/analytics'
import { useAppStore } from '@/store/app'
import { useSnippetStore } from '@/store/snippets'
import { useTagStore } from '@/store/tags'
import { computed } from 'vue'

const tagStore = useTagStore()
const snippetStore = useSnippetStore()
const appStore = useAppStore()

const tags = computed({
    get: () => snippetStore.currentTags.map((i) => i.name),
    set: async (v: any) => {
        const tagsIds: string[] = []

        for (const i of v) {
            const tag = tagStore.tags.find((t) => t.name === i.text)

            if (tag) {
                tagsIds.push(tag.id)
                track('snippets/add-tag')
            } else {
                if (!i.text) return

                const newTag = await tagStore.postTags(i.text)
                await tagStore.getTags()

                tagsIds.push(newTag.id)

                track('tags/add-new')
            }
        }

        snippetStore.selected!.tagsIds = tagsIds

        await snippetStore.patchSnippetsById(snippetStore.selectedId!, {
            tagsIds
        })
    }
})

const tagsHeight = appStore.sizes.editor.tagsHeight + 'px'
</script>

<style lang="scss" scoped>
.tags {
    height: v-bind(tagsHeight);
    padding: 0 var(--spacing-xs);
    display: flex;
    align-items: center;
}
</style>
